<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
		
		<script type="text/javascript" src="../../scripts/menu/EditableItem.js"></script>
		<script type="text/javascript" src="../../scripts/menu/RangeMenu.js"></script>
		<script type="text/javascript" src="../../scripts/grid/GridFilters.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/Filter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/DateFilter.js"></script>
		
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
		
        <script type="text/javascript">
        	var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			
			var visitMemoForm;
        	var store;
            var grid;
            
			var id = getPrarmeterValue(window.location, 'id');
			var startPage = getPrarmeterValue(window.location, 'startPage');
			
			var fcXMLReader = new Ext.data.XmlReader({
                record: 'item'
            }, [{
                name: 'id',
                mapping: 'id'
            }, {
                name: 'name',
                mapping: 'name'
            }, {
                name: 'department',
                mapping: 'department'
            }, {
                name: 'contactRehearsals',
                mapping: 'contactRehearsals'
            }, {
                name: 'contactPurchases',
                mapping: 'contactPurchases'
            }, {
                name: 'contactSupplies',
                mapping: 'contactSupplies'
            }, {
                name: 'contactLogistics',
                mapping: 'contactLogistics'
            }, {
                name: 'contactQuality',
                mapping: 'contactQuality'
            }, {
                name: 'addressBill',
                mapping: 'addressBill'
            }, {
                name: 'addressDelivery',
                mapping: 'addressDelivery'
            }, {
                name: 'addressRehearsals',
                mapping: 'addressRehearsals'
            }, {
                name: 'addressProduct',
                mapping: 'addressProduct'
            }, {
                name: 'remark',
                mapping: 'remark'
            }]);
			
			var xmlLoader = new xmlLoader('../../servlet/BiFranceCustomerServlet?action=3&id=' + id);
			
			var fcRecord = fcXMLReader.readRecords(xmlLoader.getXml()).records[0];
			
			var itemTplMarkup = [
						'<table cellspacing="0" id="the-table"><tbody>',
							'<tr><td style="background:#eeeeee;">',
							message.get('message.list.id'),
							'</td><td>{id}</td>',
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.name'),
							'</td><td>{name}</td>',
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.department'),
							'</td><td>{department}</td>',
							
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.contactrehearsals'),
							'</td><td>{contactRehearsals}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.contactpurchases'),
							'</td><td>{contactPurchases}</td>',
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.contactsupplies'),
							'</td><td>{contactSupplies}</td>',
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.contactlogistics'),
							'</td><td>{contactLogistics}</td>',
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.contactquality'),
							'</td><td>{contactQuality}</td></tr>',
							
							'<tr><td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.addressbill'),
							'</td><td>{addressBill}</td>',
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.addressdelivery'),
							'</td><td>{addressDelivery}</td>',
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.addressrehearsals'),
							'</td><td>{addressRehearsals}</td>',
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.addressproduct'),
							'</td><td>{addressProduct}</td></tr>',
						'</tbody></table>'
					];
			var itemTpl = new Ext.Template(itemTplMarkup);
			
			Ext.onReady(function(){
	             itemTpl.append('biFranceCustomer', fcRecord.data);
	            
				Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
				
				var visitMemoXMLReader = new Ext.data.XmlReader({
		                record: 'item'
		            }, [{
		                name: 'id',
		                mapping: 'id'
		            },{
						name: 'fcId',
						mapping: 'fcId'
						
					}, {
		                name: 'visitDate',
		                mapping: 'visitDate'
		            }, {
		                name: 'visitPerson',
		                mapping: 'visitPerson'
		            }, {
		                name: 'topic',
		                mapping: 'topic'
		            }, {
		                name: 'demand',
		                mapping: 'demand'
		            }, {
		                name: 'memo',
		                mapping: 'memo'
		            }]);
					
				visitMemoForm = new Ext.FormPanel({
			        labelAlign: 'left',
					url: '../../servlet/BiFranceCustomerServlet?action=101',
			        frame:true,
			        title: fcMessage.get('ui.francecustomer.editmemo'),
			        bodyStyle:'padding:5px 5px 5px 5px;margin-top: 2px;',
			        width: '100%',
					labelWidth: 105,
					reader: visitMemoXMLReader,
					collapsible: true,
			        items: [{
	                        id: 'id',
	                        name: 'id',
	                        xtype: 'hidden'
                    	},{
	                        id: 'fcId',
	                        name: 'fcId',
	                        xtype: 'hidden',
							value: fcRecord.data.id
                    	},{
							layout: 'column',
							items: [{
								columnWidth:.5,
				                layout: 'form',
								items: [{
									xtype: 'datefield',
				                    fieldLabel: fcMessage.get('ui.francecustomer.visitdate') + "(d/m/Y)",
				                    name: 'visitDate',
				                    anchor:'86%',
									allowBlank: false,
                        			blankText: message.get('message.edit.noblank'),
									tabIndex: 1
								},{
									xtype: 'textfield',
				                    fieldLabel: fcMessage.get('ui.francecustomer.demand'),
									id: 'demand',
				                    name: 'demand',
				                    anchor:'86%',
									allowBlank: false,
                        			blankText: message.get('message.edit.noblank'),
									maxLength: 512,
									tabIndex: 1
								}]
							},{
								columnWidth:.5,
				                layout: 'form',
								items: [{
									fieldLabel: fcMessage.get('ui.francecustomer.visitperson'),
			                        id: 'visitPerson',
			                        name: 'visitPerson',
									anchor: '86%',
			                        xtype: 'textfield',
									allowBlank: false,
                        			blankText: message.get('message.edit.noblank'),
									maxLength: 512,
									tabIndex: 1
								},{
									xtype: 'textfield',
				                    fieldLabel: fcMessage.get('ui.francecustomer.topic'),
				                    name: 'topic',
				                    anchor:'86%',
									allowBlank: false,
                        			blankText: message.get('message.edit.noblank'),
									maxLength: 512,
									tabIndex: 1
								}]
							}]
                    	},{
							fieldLabel: fcMessage.get('ui.francecustomer.memo'),
	                        id: 'memo',
	                        name: 'memo',
							width: '86%',
	                        xtype: 'textarea',
							maxLength: 512,
							tabIndex: 2
						}],
			
			        buttons: [{
			            text: message.get('message.edit.save'),
						handler: function(){
                            if (visitMemoForm.getForm().isValid()) {
                                visitMemoForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        visitMemoForm.getForm().reset();
										store.load();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
			        },{
						text: message.get('message.edit.reset'),
						handler: function(){
							visitMemoForm.getForm().reset();
						}
					},{
			            text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'france_customer_list.html?startPage=' + startPage;
                            }else {
                                window.location = 'france_customer_list.html';
                            }
                        }
			        }]
			    });
				
				visitMemoForm.render('visitMemo');
				
				store = new Ext.data.Store({
                    url: '../../servlet/BiFranceCustomerServlet?action=104&id=' + id,
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'index', 'visitDate', 'visitPerson', 'topic', 'demand', 'memo', 'id']),
                    
                    remoteSort: true
                });
				
				store.setDefaultSort('visitDate', 'desc');
				
				var filters = new Ext.grid.GridFilters({
				  filters:[
				    {type: 'date',  dataIndex: 'visitDate'},
				    {type: 'string',  dataIndex: 'visitPerson'},
					{type: 'string',  dataIndex: 'topic'},
					{type: 'string',  dataIndex: 'demand'}
				]});
				
				grid = new Ext.grid.GridPanel({
	                title: fcMessage.get('ui.francecustomer.listtitle'),
	                store: store,
					stripeRows: true,
					plugins: filters,
	                height: 460,
	                columns: [{
	                    header: message.get('message.list.id'),
	                    width: 20,
	                    dataIndex: 'index',
	                    sortable: false
	                }, {
	                    header: fcMessage.get('ui.francecustomer.visitdate'),
	                    width: 80,
	                    dataIndex: 'visitDate',
	                    sortable: true
	                }, {
	                    header: fcMessage.get('ui.francecustomer.visitperson'),
	                    dataIndex: 'visitPerson',
	                    sortable: true
	                }, {
	                    header: fcMessage.get('ui.francecustomer.topic'),
	                    dataIndex: 'topic',
	                    sortable: true
	                }, {
	                    header: fcMessage.get('ui.francecustomer.demand'),
	                    dataIndex: 'demand',
	                    sortable: true
	                },{
	                    header: message.get('message.list.eidt'),
	                    width: 20,
	                    dataIndex: 'id',
	                    sortable: false,
	                    renderer: renderEdit
	                },{
	                    header: message.get('message.list.delete'),
	                    width: 20,
	                    dataIndex: 'id',
	                    sortable: false,
	                    renderer: renderDelete
	                }],
	                viewConfig: {
	                    forceFit: true
	                },
	                loadMask: true,
	                renderTo: 'visitMemoList',
	                bbar: new Ext.PagingToolbar({
	                    pageSize: 20,
	                    store: store,
	                    displayInfo: true
	                })
	            });
				
				store.load();
				
				function renderEdit(value, p, record){
                    return String.format('<a href="javascript: editItem(editCallback, {0});" target="_self"><img src="../../images/icons/pencil.png" title="' + message.get('message.list.eidt') + '" /></a>', record.id);
                }
                
                function renderDelete(value, p, record){
                    return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="' + message.get('message.list.delete') + '"/></a>', record.id);
                }
	            
	        });
			
			var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/BiFranceCustomerServlet?action=102&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                store.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			var editCallback = function(){
				visitMemoForm.getForm().load({
					url:'../../servlet/BiFranceCustomerServlet?action=103&id=' + editId, 
					waitMsg:Ext.LoadMask.prototype.msg, 
					success: function(form, action){
						
					},
					failure: function(o){
						messageTip.msg(message.get('message.tip'), message.get('message.load.unsuccessful'));
					}
				});
			}
                    
                    
        </script>
    </head>
    <body>
        <div id="biFranceCustomer">
        </div>
		<div id="visitMemo">
		</div>
		<div id="visitMemoList">
		</div>
    </body>
</html>
